<ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
  <span class="cdk-visually-hidden" tabindex="-1">
    API for {{docItem?.id}}
  </span>

  <!--
  The span container is necessary for the layout to display properly. When
  a component has multiple API docs, they need to be joined together in the
  same container so that they display one after another.
  -->
  <span>
    <doc-viewer [documentUrl]="getApiDocumentUrl(docItem!)"
      class="docs-component-view-text-content docs-component-api"
      (contentRendered)="updateTableOfContents(docItem!.name, $event)">
    </doc-viewer>

    <doc-viewer *ngFor="let additionalApiDoc of docItem!.additionalApiDocs; let index = index"
      documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
      class="docs-component-view-text-content docs-component-api"
      (contentRendered)="updateTableOfContents(additionalApiDoc.name, $event, index + 1)">
    </doc-viewer>
  </span>

  <table-of-contents #toc
      *ngIf="showToc | async"
      container=".mat-drawer-content"></table-of-contents>
</ng-container>
